<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>元宇宙商品信息</title>
        <!-- Bootstrap -->
        <link rel="stylesheet" href="css/bootstrap.css">
        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)-->
        <script src="js/jquery-1.12.4.js"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="js/bootstrap.js"></script>
        <!-- jar包，没有空格版 -->
        <!-- <script src="js/bootstrap.min.js"></script>-->

        <!-- 引入css样式 -->
        <link rel="stylesheet" href="css/css.css">
    </head>
    <body>
        <!-- 版心 -->
        <div class="container">
            <h1 style="color:#696969">元宇宙商品信息</h1>
            <!-- table 水平方向的分隔线
                table-striped 可以给 <tbody> 之内的每一行增加斑马条纹样式。
                table-bordered 类为表格和其中的每个单元格增加边框。
                table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
                table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
                active	鼠标悬停在行或单元格上时所设置的颜色
                success 标识成功或积极的动作
                info 标识普通的提示信息或动作
                warning 标识警告或需要用户注意
                danger 标识危险或潜在的带来负面影响的动作
                -->
            <table width="100%" border="1" cellpadding="0" cellspacing="0" class="table table-striped table-bordered table-hover table-condensed text-center">
                <thead>
                    <tr class="active">
                        <td>商品编号</td>
                        <td>商品姓名</td>
                        <td>商品描述</td>
                        <td>商品价格</td>
                        <td>商品状态</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody id = "tbody">

                </tbody>
            </table>
            <div class="add"><input type="button" value="添加元宇宙商品信息" id="add" class="btn btn-info"></div>
        </div>
        
    </body>
</html>
<script type="text/javascript">
    //JQuery发送异步请求
    $.get('showAll',function (result) {
        //判断服务器是否出现异常
        if (result){
            //获取数据
            let data = result.data;
            console.log(data);//打印数据
            //动态生成数据表格
            for (let dataKey of data) {
                //追加表格数据
                $('#tbody').append(`
                    <tr >
                        <td>${dataKey.id}</td>
                        <td>${dataKey.productName}</td>
                        <td>${dataKey.productDesc}</td>
                        <td>${dataKey.productPrice}</td>
                        <td>${dataKey.flag==0?"下架":"上架"}</td>
                        <td>
                             <input type="button" value="修改" class="btn btn-default" onclick="updateById(${dataKey.id},${dataKey.flag})">
                             <input type="button" value="删除" class="btn btn-default" onclick="deleteById(${dataKey.id})">
                        </td>
                    </tr>
            `)
                //获取奇数行和偶数行
                $('tr:odd').addClass("warning")
                $('tr:even').addClass("info")
            }
        }
    },'json')

    //触发删除点击事件
    function deleteById(id){
        //判断是否删除
        if (confirm("是否确认删除商品")){
            //发送异步请求
            $.get("delete?id="+id,function (result) {
                if (result.flag){
                    //判断是否删除成功
                    if (result.data == "success"){
                        //删除成功
                        alert("删除成功！");
                        //刷新页面
                        location.href = "index.html";
                    }else {
                        alert("删除失败！")
                    }
                }else {
                    alert(result.error);
                }
            },"json")
        }
    }

    //触发修改点击事件
    function updateById(id,flag){
        //判断是否修改
        if (confirm("是否确认修改商品状态")){
            //修改flag（商品状态）的值
            flag = flag == 0 ? 1:0;//三目运算符
            //发送异步请求
            $.get("update?id="+id+"&flag="+flag,function (result) {
                if (result.flag){
                    //判断是否修改成功
                    if (result.data == "success"){
                        //修改成功
                        alert("修改成功！");
                        //刷新页面
                        location.href = "index.html";
                    }else {
                        alert("修改失败！")
                    }
                }else {
                    alert(result.error);
                }
            },"json")
        }
    }

    //跳转添加页面
    $('#add').on('click',function () {
        location.href = "add.html";
    })


</script>